<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false" fullscreen :close-on-press-escape="mode != 'show' ? false : true">
		<el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="170" label-position="right">
			<el-row :gutter="1">
				<!-- <el-col :span="6">
					<el-form-item :label="$t('sale.sale.money')" prop="contract_code">
						<el-input v-model="form.contract_code" placeholder="销售金额" clearable></el-input>
					</el-form-item>
				</el-col> -->
				<el-col :span="6">
					<el-form-item :label="$t('sale.client.client')" prop="customer_id">
						<div style="display:flex;width:100%">
							<el-input v-model="customer_name" :placeholder="$t('all.select')" @click="checkCustom" readonly></el-input>
							<el-button type="info" icon="el-icon-Close" style="margin-left:5px" @click="clearCustom"></el-button>
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('sale.client.contacts')" prop="contacts">
						<el-select v-model="form.contacts" :placeholder="$t('all.select')" style="width:100%" clearable filterable>
							<el-option v-for="item in contactList" :key="item.id" :label="item.contacts" :value="item.id"/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('sale.sale.date')" prop="open_single">
						<el-date-picker v-model="form.open_single" type="date" :placeholder="$t('all.select')" :value-format="'YYYY-MM-DD'" style="width:100%"/>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="6">
					<el-form-item label="预付款" prop="advance_price">
						<el-input v-model="form.advance_price" placeholder="预付款" clearable></el-input>
					</el-form-item>
				</el-col> -->
			</el-row>
			<el-row :gutter="1">
				<el-col :span="6">
					<el-form-item :label="$t('sale.sale.money')" prop="contract_price">
						<el-input v-model="form.contract_price" :placeholder="$t('all.enter')" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('sale.sale.leadtime')" prop="deliver_date">
						<el-date-picker v-model="form.deliver_date" type="date" :placeholder="$t('all.select')" :value-format="'YYYY-MM-DD'" style="width:100%"/>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('sale.sale.istax')" prop="is_tax">
						<el-select v-model="form.is_tax" :placeholder="$t('all.select')" style="width:100%" clearable>
							<el-option :label="$t('all.selectno')" :value="0"/>
							<el-option :label="$t('all.selectyes')" :value="1"/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('sale.sale.isticket')" prop="is_ticket">
						<el-select v-model="form.is_ticket" :placeholder="$t('all.select')" style="width:100%" clearable>
							<el-option :label="$t('all.selectno')" :value="1"/>
							<el-option :label="$t('all.selectyes')" :value="2"/>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="1">
				<el-col :span="6">
					<el-form-item :label="$t('sale.sale.heaccount')" prop="account_num">
						<el-input v-model="form.account_num" :placeholder="$t('all.enter')"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('sale.sale.sendtime')" prop="send_date">
						<el-date-picker v-model="form.send_date" type="date" :placeholder="$t('all.select')" :value-format="'YYYY-MM-DD'" style="width:100%"/>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('sale.sale.logistics')" prop="send_goods_no">
						<el-input v-model="form.send_goods_no" :placeholder="$t('all.enter')" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="1">
				<el-col :span="12">
					<el-form-item :label="$t('all.remark')" prop="remark">
						<el-input v-model="form.remark" :placeholder="$t('all.enter')" type="textarea" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="$t('all.attachment')" prop="enclosure">
						<sc-upload-file v-model="form.enclosure" :limit="1">
							<el-button type="primary" icon="el-icon-upload">{{$t('all.selectattachment')}}</el-button>
						</sc-upload-file>
					</el-form-item>
				</el-col>
			</el-row>
			<el-col :span="24">
				<el-form-item :label="$t('procure.plan.product')" prop="order_detail">
					<el-button type="primary" size="small" icon="el-icon-plus" @click="checkGoods">{{$t ('goods.bom.select')}}</el-button>
					<sc-form-table ref="table" v-model="form.order_detail" :addTemplate="addTemplate" :placeholder="$t('all.noData')" height="400">
						<el-table-column prop="goods_code" :label="$t('goods.goods.code')" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.goods_code" :placeholder="$t('goods.goods.code')" :disabled="scope.row.goods_id"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="goods_name" :label="$t('goods.goods.name')" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.goods_name" :placeholder="$t('goods.goods.name')" :disabled="scope.row.goods_id"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="cate_id" :label="$t('goods.cate.cate')" align="center">
							<template #default="scope">
								<el-cascader :disabled="scope.row.goods_id" v-model="scope.row.cate_id" :options="cateList" :props="cateProps" clearable style="width: 100%;"></el-cascader>
							</template>
						</el-table-column>
						<el-table-column prop="unit_id" :label="$t('goods.unit.unit')" align="center">
							<template #default="scope">
								<el-select :disabled="scope.row.goods_id" v-model="scope.row.unit_id" filterable style="width: 100%" :placeholder="$t('all.select')">
									<el-option v-for="item in unitList" :key="item.id" :label="item.unit_name" :value="item.id"/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column :label="$t('sale.sale.number')" prop="sale_num" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.sale_num" :placeholder="$t('sale.sale.number')" @input="totalCompute" @focus="onFocus($event)"></el-input>
							</template>
						</el-table-column>
						<el-table-column :label="$t('all.price')" prop="price" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.price" :placeholder="$t('all.price')" @input="totalCompute" @focus="onFocus($event)"></el-input>
							</template>
						</el-table-column>
						<el-table-column :label="$t('all.total')" prop="total_price" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.total_price" :placeholder="$t('all.total')" readonly></el-input>
							</template>
						</el-table-column>
						<el-table-column :label="$t('all.remark')" prop="remark" align="center">
							<template #default="scope">
								<el-input v-model="scope.row.remark" :placeholder="$t('all.remark')"></el-input>
							</template>
						</el-table-column>
					</sc-form-table>
				</el-form-item>
			</el-col>
			<el-row :gutter="1">
				<el-col :span="6">
					<el-form-item :label="$t('procure.order.allmoney')" prop="total_price">
						<el-input v-model="form.total_price" :placeholder="$t('procure.order.allmoney')" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('finance.account')" prop="settlement_id">
						<el-select v-model="form.settlement_id" filterable clearable :placeholder="$t('all.select')" style="width:100%">
							<el-option v-for="item in accountList" :key="item.id" :label="item.account" :value="item.id"/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('finance.receivemoney')" prop="pay_price">
						<el-input v-model="form.pay_price" :placeholder="$t('finance.receivemoney')" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item :label="$t('procure.order.stage')" prop="is_stages">
						<el-switch v-model="form.is_stages" :active-value="1" :inactive-value="0" inline-prompt :active-text="$t('procure.order.isstage')" :inactive-text="$t('procure.order.unstage')"></el-switch>
						<el-tag type="primary" v-if="form.is_stages == 1" @click="openStage">{{$t('procure.order.setstag')}}</el-tag>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<!-- <template #footer>
		  <el-button @click="visible = false">{{$t('all.cancel')}}</el-button>
		  <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">{{$t('all.save')}}</el-button>
		</template> -->
		<el-footer style="text-align: right;position: fixed;bottom: 0;right: 0;left: 0;padding: 10px 20px;background: #fff;border-top: 1px solid #eee;">
			<el-button @click="visible = false">{{$t('all.cancel')}}</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit(0)">{{$t('all.save')}}</el-button>
			<el-button v-if="mode == 'add'" type="primary" :loading="isSaveing" @click="submit(1)">{{$t('all.savecheck')}}</el-button>
		</el-footer>
	</el-dialog>
	<select-goods v-if="dialog.goods" ref="goodsDialog" @success="goodsUpdate" @closed="dialog.goods=false" :query="{system_disable:0}"></select-goods>
	<client-list v-if="dialog.client" ref="clientDialog" @success="clientUpdate" @closed="dialog.client=false"></client-list>
	<el-dialog :title="$t('procure.order.setstag')" v-model="stage" :close-on-click-modal="false" :close-on-press-escape="false">
		<el-form :disabled="mode == 'show'">
			<sc-form-table ref="table" v-model="stages_all" :addTemplate="addTemplate" :placeholder="$t('all.noData')" height="550" hideAdd hideDelete>
				<el-table-column prop="type" :label="$t('procure.order.stagetype')" align="center" width="150">
					<template #default="scope">
						<div v-for="item in stages_all" :key="item.stages_number">
							{{ scope.row.stages_number == item.stages_number ? item.type : '' }}
						</div>
					</template>
				</el-table-column>
				<el-table-column :label="$t('procure.order.percentage')" prop="collect_rate" align="center">
					<template #default="scope">
						<el-input-number type="number" v-model="scope.row.collect_rate" :placeholder="$t('procure.order.percentage')" @change="stageInputRate(scope.row,scope.$index)" controls-position="right">
							<template #suffix>
								<span>%</span>
							</template>
						</el-input-number>
					</template>
				</el-table-column>
				<el-table-column :label="$t('finance.receivemoney')" prop="money" align="center">
					<template #default="scope">
						<el-input-number type="number" v-model="scope.row.money" :placeholder="$t('finance.receivemoney')" @change="stageInput(scope.row,scope.$index)" controls-position="right"></el-input-number>
					</template>
				</el-table-column>
				<el-table-column :label="$t('procure.order.date')" prop="collect_date" align="center">
					<template #default="scope">
						<el-date-picker v-model="scope.row.collect_date" type="date" :placeholder="$t('all.select')" :value-format="'YYYY-MM-DD'" style="width:100%"/>
					</template>
				</el-table-column>
				<el-table-column :label="$t('all.remark')" prop="remark" align="center">
					<template #default="scope">
						<el-input v-model="scope.row.remark" :placeholder="$t('all.remark')"></el-input>
					</template>
				</el-table-column>
			</sc-form-table>
		</el-form>
		<template #footer>
			<el-button @click="stage = false">{{$t('all.cancel')}}</el-button>
			<el-button type="primary" v-if="mode != 'show'" @click="closeStage">{{$t('all.confirm')}}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import ClientList from '../client/list/clientList.vue';
import selectGoods from '../../goods/info/selectGoods.vue';

export default {
	components: {selectGoods, ClientList},
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: this.$t('all.add'),
				copy: this.$t('all.add'),
				edit: this.$t('all.edit'),
				show: this.$t('all.show')
			},
			visible: false,
			isSaveing: false,
			//表单数据
			form: {
				id: "",
				customer_id: "",
				contacts: "",
				open_single: this.moment().format('YYYY-MM-DD'),
				advance_price: "",
				contract_price: "",
				contract_code: "",
				deliver_date: "",
				is_tax: "",
				is_ticket: "",
				ship_name: "",
				account_num: "",
				send_date: "",
				send_goods_no: "",
				remark: "",
				enclosure: "",
				status: "",
				order_detail: [],
				total_price: "",
				pay_price: 0,
				settlement_id: "",
				is_stages: 0,
				stages_all: [],
                is_check: 0,
			},
			stage: false,
			stages_all: [
				{
					stages_number: 1,
					type: this.$t('procure.order.type1'),
					collect_rate: 100,
					money: 0,
					collect_date: this.moment().format('YYYY-MM-DD'),
					remark: ""
				},
				{
					stages_number: 2,
					type: this.$t('procure.order.type2'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
				{
					stages_number: 3,
					type: this.$t('procure.order.type3'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
				{
					stages_number: 4,
					type: this.$t('procure.order.type4'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
				{
					stages_number: 5,
					type: this.$t('procure.order.type5'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
				{
					stages_number: 6,
					type: this.$t('procure.order.type6'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
				{
					stages_number: 7,
					type: this.$t('procure.order.type7'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
				{
					stages_number: 8,
					type: this.$t('procure.order.type8'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
				{
					stages_number: 9,
					type: this.$t('procure.order.type9'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
				{
					stages_number: 10,
					type: this.$t('procure.order.type10'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
				{
					stages_number: 11,
					type: this.$t('procure.order.type11'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
				{
					stages_number: 12,
					type: this.$t('procure.order.type12'),
					collect_rate: 0,
					money: 0,
					collect_date: "",
					remark: ""
				},
			],
			//验证规则
			rules: {
				customer_id: [{required: true, message: this.$t('all.select') + ' ' + this.$t('sale.client.client')}],
				contacts: [{required: true, message: this.$t('all.select') + ' ' + this.$t('sale.client.contacts')}],
				deliver_date: [{required: true, message: this.$t('all.select') + ' ' + this.$t('sale.sale.leadtime')}],
				send_date: [{required: true, message: this.$t('all.select') + ' ' + this.$t('sale.sale.sendtime')}],
			},
			customer_name: "",
			contactList: [],
			unitList: [],
			cateList: [],
			addTemplate: {},
			dialog: {
				goods: false,
				client: false,
			},
			cateProps: {
				value: "id",
				label: "cate_name",
				checkStrictly: true
			},
			accountList: [],
		}
	},
	mounted() {
		this.getCate()  //分类
		this.getUnit() // 单位
		this.getAccount() // 账号
		this.getMonth()
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法
		submit(e) {
            this.form.is_check = e
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = [];
					if (this.form.id) {
						res = await this.$API.contract.contract.edit.post(this.form);
					} else {
						res = await this.$API.contract.contract.add.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 1) {
						this.visible = false;
                        this.$emit('success', this.form, this.mode)
                        this.$message.success(this.$t('all.yes'))
					} else {
						this.$alert(res.message,this.$t('all.prompt'), {type: "error"});
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		async setData(data) {
			this.form.id = data.id
			var res = await this.$API.contract.contract.detail.get({id: data.id});
			this.form.customer_id = res.data.customer_id
			this.customer_name = data.customer.customer_name
			this.form.open_single = res.data.open_single
			this.form.contract_code = res.data.contract_code
			this.form.advance_price = res.data.advance_price
			this.form.contract_price = res.data.contract_price
			this.form.deliver_date = res.data.deliver_date
			this.form.is_tax = res.data.is_tax == 0 ? '' : res.data.is_tax
			this.form.is_ticket = res.data.is_ticket == 0 ? '' : res.data.is_ticket
			this.form.ship_name = res.data.ship_name
			this.form.account_num = res.data.account_num
			this.form.send_date = res.data.send_date
			this.form.send_date = res.data.send_date
			this.form.send_goods_no = res.data.send_goods_no
			this.form.remark = res.data.remark
			this.form.enclosure = res.data.enclosure
			this.form.status = res.data.status
			this.form.total_price = res.data.total_price
			this.form.pay_price = res.data.pay_price
			this.form.settlement_id = res.data.settlement_id
			this.form.contract_status = res.data.contract_status
			let array = []
			res.data.order_detail.map(item => {
				array.push({
					id: item.id,
					goods_id: item.goods_id,
					sale_num: item.sale_num,
					price: item.price,
					total_price: item.total_price,
					supplier: item.supplier,
					standard: item.standard,
					material: item.material,
					connect: item.connect,
					power: item.power,
					caliber: item.caliber,
					delivery: item.delivery,
					remark: item.remark,
					goods_name: item.goods && item.goods.goods_name,
					unit_id: item.goods && item.goods.unit_id,
					cate_id: item.goods && item.goods.last_cate,
					goods_code: item.goods && item.goods.goods_code,
				})
			})
			this.form.order_detail = array
			this.form.is_stages = res.data.is_stages
			let stage = res.data.by_stages && res.data.by_stages
			for (let i = 0; i < stage.length; i++) {
				stage[i].type = this.stages_all[i].type
				this.stages_all.splice(i, 1, stage[i]);
			}
			this.getContact(res.data.customer_id)
			this.form.contacts = res.data.contacts
			this.totalCompute()
		},
		onFocus(event) {
			event.target.select();
		},
		checkCustom() {
			this.dialog.client = true
			this.$nextTick(() => {
				this.$refs.clientDialog.open('add')
			})
		},
		clientUpdate(data) {
			console.log(data);
			this.form.customer_id = data.id
			this.customer_name = data.customer_name
			this.getContact(data.id)
		},
		async getContact(e) {
			var res = await this.$API.client.client.detail.get({id: e});
			this.contactList = res.data.customer
		},
		clearCustom() {
			this.form.customer_id = ""
			this.form.contacts = ""
			this.customer_name = ""
			this.contactList = []
		},
		// 选择商品
		checkGoods(e) {
			this.dialog.goods = true
			this.$nextTick(() => {
				this.$refs.goodsDialog.open('add').setData(e)
			})
		},
		goodsUpdate(data) {
			let array = []
			data.map((item) => {
				array.push({
					goods_id: item.id,
					goods_name: item.goods_name,
					cate_id: item.last_cate,
					unit_id: item.unit_id,
					goods_code: item.goods_code,
					supplier: '自产',
					sale_num: 1,
					price: item.factory_price,
					total_price: item.factory_price,
				})
			})
			let existingIds = this.form.order_detail.map(item => item.goods_id);
			for (let i = array.length - 1; i >= 0; i--) {
				if (existingIds.includes(array[i].goods_id)) {
					array.splice(i, 1);
				}
			}
			this.form.order_detail = [...this.form.order_detail, ...array]
			this.totalCompute()
		},
		totalCompute() {
			let count_price = 0
			this.form.contract_price = 0
			this.form.total_price = 0
			this.form.order_detail.map(item => {
				if (item.price && item.sale_num) {
					count_price = Number(count_price) + (Number(item.sale_num) * Number(item.price))
					item.total_price = (Number(item.sale_num) * Number(item.price)).toFixed(2)
				}
			})
			this.form.contract_price = (count_price).toFixed(2)
			this.form.total_price = (count_price).toFixed(2)
		},
		// 获取分类
		async getCate() {
			var res = await this.$API.goods.goodsCate.all.get();
			this.cateList = res.data
		},
		// 获取单位
		async getUnit() {
			var res = await this.$API.goods.goodsUnit.all.get();
			this.unitList = res.data
		},
		// 账户
		async getAccount() {
			var res = await this.$API.finance.account.all.get();
			this.accountList = res.data;
		},
		getMonth() {
			for (let i = 1; i < this.stages_all.length; i++) {
				let prevDate = this.moment(this.stages_all[i - 1].collect_date);
				let nextDate = prevDate.add(1, 'month');
				this.stages_all[i].collect_date = nextDate.format('YYYY-MM-DD');
			}
		},
		stageInput(row, index) {
			// this.setStage(row,index)
			let num = 0
			this.stages_all.map((item, index1) => {
				if (index1 <= index) {
					num += item.money
				}
				if (index1 == index + 1) {
					item.money = this.form.total_price - Number(num)
				}
			})
		},
		setStage(row, index) {
			let num = 0
			this.stages_all.map((item, index1) => {
				if (index1 <= index) {
					num += item.money
				}
				if (index1 == index + 1) {
					item.money = this.form.total_price - Number(num)
				}
			})
		},
		stageInputRate(row, index) {
			let num = 0
			this.stages_all.map((item, index1) => {
				if (index1 <= index) {
					num += item.collect_rate
					// item.money = (this.form.total_price * num / 100).toFixed(2)
				}
				if (index1 == index + 1) {
					item.collect_rate = 100 - Number(num)
					// item.money = index == 0 ? this.form.total_price - this.stages_all[index].money : this.stages_all[index - 1].money - this.stages_all[index].money
				}
			})
		},
		closeStage() {
			this.stage = false
			let array = []
			this.stages_all.map(item => {
				if (item.money != 0) {
					array.push({
						collect_rate: item.collect_rate,
						money: item.money,
						stages_number: item.stages_number,
						collect_date: item.collect_date,
						remark: item.remark,
					})
				}
			})
			this.form.stages_all = array
		},
		openStage() {
			this.stage = true
			if (this.mode == 'add' || this.mode == 'copy') {
				this.stages_all[0].money = this.form.total_price
			}
		},
		async setCopy(data) {
			var res = await this.$API.contract.contract.detail.get({id: data.id});
			this.form.customer_id = res.data.customer_id
			this.customer_name = data.customer.customer_name
			this.form.open_single = res.data.open_single
			this.form.advance_price = res.data.advance_price
			this.form.contract_price = res.data.contract_price
			this.form.deliver_date = res.data.deliver_date
			this.form.ship_name = res.data.ship_name
			this.form.total_price = res.data.total_price
			this.form.contract_status = res.data.contract_status
			let array = []
			res.data.order_detail.map(item => {
				array.push({
					id: item.id,
					goods_id: item.goods_id,
					sale_num: item.sale_num,
					price: item.price,
					total_price: item.total_price,
					supplier: item.supplier,
					standard: item.standard,
					material: item.material,
					connect: item.connect,
					power: item.power,
					caliber: item.caliber,
					delivery: item.delivery,
					remark: item.remark,
					goods_name: item.goods && item.goods.goods_name,
					unit_id: item.goods && item.goods.unit_id,
					cate_id: item.goods && item.goods.cate_id,
					goods_code: item.goods && item.goods.goods_code,
				})
			})
			this.form.order_detail = array
			this.getContact(res.data.customer_id)
			this.form.contacts = res.data.contacts
			this.totalCompute()
		},
	}
}
</script>

<style></style>
